<template>
  <div>
    <div class="f-rightPanel" :class="{show:drawer}" @click="drawer=!drawer">
      <i :class="drawer?'el-icon-close':'el-icon-setting'"></i>
    </div>

    <el-drawer
      size="300px"
      :visible.sync="drawer"
      :direction="direction"
      :show-close="false"
      ref="drawer"
    >
      <template slot="title">
        <i class="el-icon-setting"><span>系统配置项</span></i>
      </template>

      <FSettings/>

    </el-drawer>

  </div>

</template>
<script>
import FSettings from '@/components/f-settings/f-settings'

export default {
  name: 'FRightPanel',
  components: {
    FSettings
  },
  data () {
    return {
      drawer: false,
      direction: 'rtl'
    }
  },
  watch: {
    drawer (value) {
      if (value) {
      }
    }
  }
}
</script>
<style>
  .f-rightPanel {
    position: absolute;
    right: 0;
    top: 250px;
    width: 48px;
    height: 48px;
    text-align: center;
    line-height: 58px;
    background: rgb(64, 158, 255);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    z-index: 9999;
    transition: all .3s;
  }

  .f-rightPanel i {
    color: #ffffff;
    font-size: 24px;
  }

  .show {
    right: 300px;
    transition: all .3s;
  }

  .el-drawer__header {
    font-size: 16px;
    text-align: left;
    font-weight: bold;
    color: #000000;
  }

</style>
